<template>
  <a-descriptions title="">
    <a-descriptions-item label="会员ID">{{ details.id }}</a-descriptions-item>
    <a-descriptions-item label="会员状态"> 
      {{details.statusDesc }} 
    </a-descriptions-item>
    <a-descriptions-item label="手机号">{{ details.mobile }}</a-descriptions-item>
    <a-descriptions-item label="会员积分余额">{{ details.balance }}</a-descriptions-item>
    <a-descriptions-item label="审核中积分">{{ details.reviewAmount }}</a-descriptions-item>
    <a-descriptions-item label="已兑换积分">{{ details.expendedAmount }}</a-descriptions-item>
    <a-descriptions-item label="参与项目数量">{{ details.completes + details.rejects }}</a-descriptions-item>
    <a-descriptions-item label="完成项目数量">{{ details.completes }}</a-descriptions-item>
    <a-descriptions-item label="QC数量">{{ details.qc }}</a-descriptions-item>
    <a-descriptions-item label="注册时间">{{proxy.$filters.formatTime(details.createTime)}}</a-descriptions-item>
    <a-descriptions-item label="最后活跃时间">{{ proxy.$filters.formatTime(details.lastActiveTime) }}</a-descriptions-item>
    <a-descriptions-item label="认证通过时间">{{ proxy.$filters.formatTime(details.qualifyTime) }}</a-descriptions-item>
    <a-descriptions-item label="推荐人">{{ details.sharerName }}</a-descriptions-item>
  </a-descriptions>
  <a-descriptions :title="`兑换信息（${record.statusDesc || ''}）`">
    <a-descriptions-item label="商品名称">{{ record.name }}</a-descriptions-item>
    <a-descriptions-item label="兑换时间">{{proxy.$filters.formatTime(record.createTime)}}</a-descriptions-item>
    <a-descriptions-item label="商品类型">{{ record.productTypeDesc }}</a-descriptions-item>
    <a-descriptions-item label="消耗积分">{{ record.amount }}</a-descriptions-item>
    <a-descriptions-item label="兑换账户" v-if="record.productType === 1">
      {{ record.accountType === 'wechat' ? '微信': '支付宝'}} {{ record.account }}
    </a-descriptions-item>
    <a-descriptions-item label="充值手机号" v-if="record.productType === 2">{{ record.account }}</a-descriptions-item>
    <a-descriptions-item label="收货人信息" v-if="record.productType === 4">
      {{ record.realname }} {{ record.account }} {{ record.address }}
    </a-descriptions-item>
  </a-descriptions>
  <a-descriptions title="订单信息" v-if="record.status === 1">
    <a-descriptions-item label="订单ID">{{ record.orderNo }}</a-descriptions-item>
    <a-descriptions-item label="虚拟卡号">{{ record.virtualCardNum }}</a-descriptions-item>
    <a-descriptions-item label="现金/话费充值">已完成</a-descriptions-item>
    <a-descriptions-item label="快递单号">{{ record.logisticsType }} {{ record.trackingNo }}</a-descriptions-item>
  </a-descriptions>
  <a-button type="primary" @click="onOpenSuccess">审核通过</a-button>
  <a-button type="primary" danger  style="margin-left: 10px;" @click="openStatus">审核拒绝</a-button>
  <BasicModal @register="register">
    <a-form-item label="">
      <a-textarea :rows="4" v-model:value="formState.reason" placeholder="请输入审核拒绝原因" />
    </a-form-item>
    <template #footer>
      <a-button type="primary" @click="onSubmit(-1)">拒绝</a-button>
      <a-button @click="() => {openStatus(false)}">取消</a-button>
    </template>
  </BasicModal>
  <BasicModal @register="register1">
    <a-form
      :model="formState"
      ref="formRef"
      :label-col="{ span: 4 }"
      :wrapper-col="{ span: 16 }"
    >
      <template v-if="record.productType === 3">
        <a-form-item
          label="卡号"
          name="virtualCardNum"
          :rules="[{ required: true, message: '请输入卡号' }]"
        >
          <a-input v-model:value="formState.virtualCardNum" placeholder="请输入卡号" />
        </a-form-item>

        <a-form-item
          label="卡密"
          name="virtualCdkey"
          :rules="[{ required: true, message: '请输入卡密!' }]"
        >
          <a-input v-model:value="formState.virtualCdkey" placeholder="请输入卡密" />
        </a-form-item>
        <a-form-item name="virtualExpire" label="有效期" :rules="[{ required: true, message: '请输入有效期!' }]">
          <a-input v-model:value="formState.virtualExpire" placeholder="请输入有效期" />
        </a-form-item>
      </template>
      <template v-else-if="record.productType === 4">
        <a-form-item
          label="快递名称"
          name="logisticsType"
          :rules="[{ required: true, message: '请输入快递名称' }]"
        >
          <a-input v-model:value="formState.logisticsType" placeholder="请输入快递名称" />
        </a-form-item>

        <a-form-item
          label="快递单号"
          name="trackingNo"
          :rules="[{ required: true, message: '请输入快递单号!' }]"
        >
          <a-input v-model:value="formState.trackingNo" placeholder="请输入快递单号" />
        </a-form-item>
      </template>
      <div v-else-if="record.productType === 1">点击审核通过之后，奖励将自动发放到用户账户</div>
      <div v-else-if="record.productType === 2">请确定给会员充值成功之后，再点击通过审核</div>
    </a-form>
    <template #footer>
      <a-button type="primary" @click="onSubmit(1)">审核通过</a-button>
      <a-button @click="() => {openSuccess(false)}">取消</a-button>
    </template>
  </BasicModal>
</template>
<script setup>
import { useRoute, useRouter } from 'vue-router'
import { message } from 'ant-design-vue';
import { onMounted, reactive, ref } from 'vue';
import BasicModal from '@/components/Modal/BasicModal.vue';
import { useModal } from "@/components/Modal/useModal";
import { redeemDetails, redeem } from '@/api/product.js'
import { getDetails } from '@/api/user.js'
import { getCurrentInstance } from 'vue'
const { proxy } = getCurrentInstance()
const formRef = ref();
const route = useRoute()
const router = useRouter()
const details = ref({});
const record = ref({});
const formState = reactive({
  virtualCardNum: undefined,
  virtualCdkey: undefined,
  virtualExpire: undefined,
  trackingNo: undefined,
  logisticsType: undefined,
  reason: undefined
})
const [register, { actionDialog: openStatus }] = useModal({
  title: "审核拒绝"
});
const [register1, { actionDialog: openSuccess, setProps }] = useModal({
  title: "审核"
});
const userStatusList = ref([
  { label: '待审核', value: 2 },
  { label: '已认证', value: 1 },
  { label: '未认证', value: 0 },
  { label: '已拉黑', value: -1 },
  { label: '审核拒绝', value: -2 }
])
const statusList = ref([
  { label: '待审核', value: 0 },
  { label: '审核成功', value: 1 },
  { label: '审核拒绝', value: -1 },
])
const productTypeList = ref([
  { label: '现金', value: 1 },
  { label: '话费', value: 2 },
  { label: '虚拟物品', value: 3 },
  {label: '实物', value: 4}
])
onMounted(() => {
  getDetails({memberId: route.query.uid}).then(res => {
    details.value = res.data
    details.value.statusDesc = userStatusList.value.find(i => i.value === res.data.status).label
  })
  redeemDetails(route.query.id).then(res => {
    record.value = res.data
    record.value.statusDesc = statusList.value.find(i => i.value === res.data.status).label
    record.value.productTypeDesc = productTypeList.value.find(i => i.value === res.data.productType).label
  })
})
const onOpenSuccess = () => {
  setProps({ title: `${record.value.productTypeDesc}审核` })
  openSuccess()
}
const onSubmit = async (status) => {
  const req = {
    id: record.value.id,
    status
  }
  if (status === 1) {
    const values = await formRef.value.validateFields();
    req = {...req, ...values}
  }
  if (status === -1 && !formState.reason) {
    message.error('请输入拒绝原因')
    return
  }
  redeem(req).then(() => {
    message.success('提交成功')
    router.go(-1)
  })
}
</script>